<div class="modal fade" id="private_message_modal" role="dialog">
    <div class="modal-dialog" style="width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title" id="myModalLabel">New Course</h2>
            </div>
            <div class="modal-body">
                {% include "account/mail/form.html" with form=form %}
            </div>
            <div class="modal-footer">
                <button onclick="close_private_message();"
                             id="clost_btn"
                           name="clost_btn"
                           type="button"
                          class="btn btn-primary">
                    <i class="fa fa-check"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * Dynamic UI Code.
     *  To give our application a dynamic feel, the following jQuery code will be
     *  used to perform various UI changes.
     */
     $(document).ready(function(){
        $('#private_message_modal').on('hidden.bs.modal', function (e) {
            $('#private_message_modal').html('');
            $('#clost_btn').prop("disabled", false);
        });
    });
    
    function close_private_message()
    {
        $('#clost_btn').prop("disabled", true);
        $('#private_message_modal').modal('hide');
    }
</script>
